<style lang="less" scoped>
    .bgBox {
        position: relative;
        width: 100%;
        /*background-image: url("../../assets/img/qixiZone_bg.png");*/
        /*background-size: 100% auto;*/
        /*background-repeat: no-repeat;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        z-index: -1;
        & > img {
            width: 100%;
        }
    }

    .listBox {
        width: 100%;
        padding: 0.24rem 0.32rem 0.6rem;
        li {
            width: 100%;
            /*border-radius: .55rem;*/
            /*box-shadow: 0 0 .18rem .05rem rgba(255, 180, 0, 0.61);*/
            margin-bottom: .24rem;
            display: flex;
            justify-content: center;
            align-items: center;
            /*overflow: hidden;*/
            position: relative;
            &:last-child {
                margin-bottom: 0;
            }
            img {
                width: 100%;
                text-align: center;
            }
            &:nth-child(n) img {
                width: 100%;
                position: relative;
                z-index: 1;
            }
        }
        .borderBox {
            position: absolute;
            bottom: -1.4%;
            left: -1%;
            width: 102%;
            height: 99%;
            /*border: .08rem solid #000;*/
            padding: .08rem;
            border-radius: 0.36rem;
        }
        .no_1_icon {
            width: .7rem;
            height: 1.08rem;
            background-image: url("../../assets/img/no_1.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 0;
        }
        .no_2_icon {
            width: .7rem;
            height: 1.08rem;
            background-image: url("../../assets/img/no_3.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 0;
        }
        .no_3_icon {
            width: .7rem;
            height: 1.08rem;
            background-image: url("../../assets/img/no_2.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 0;
        }
        .borderBox.no_1 {
            background-image: -webkit-linear-gradient(180deg, #ffef79, #c2800e); /* Safari 5.1 - 6.0 */
            background-image: -o-linear-gradient(180deg, #ffef79, #c2800e); /* Opera 11.1 - 12.0 */
            background-image: -moz-linear-gradient(180deg, #ffef79, #c2800e); /* Firefox 3.6 - 15 */
            background-image: linear-gradient(180deg, #ffef79, #c2800e);
        }
        .borderBox.no_2 {
            background-image: linear-gradient(180deg, #efefef, #8e8e8e);
        }
        .borderBox.no_3 {
            background-image: linear-gradient(180deg, #fab426, #9f4500);
        }
    }
</style>
<style lang="less" scoped>
    /**   2018.09.13  改版*/
    .main_allScroll {
        top: 0 !important;
        overflow: hidden;
        margin-top: 0 !important;
        background-color: #fff;
    }

    .collage_tab .header {
        background-color: #e94f4f;
        color: #fff;
        border-color: transparent;
        transition: background-color, border-color .5s;
        .title {
            color: #fff;
        }
    }

    .collage_tab .header.hide {
        background-color: rgba(255, 255, 255, 0);
        border-color: transparent;
    }

    .chinaGoodsScroll {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        padding-bottom: 1rem;
    }

    .chinese_goods_tu {
        width: 7.5rem;
        margin: .7rem auto .66rem;
        img{
            width: 100%;
            height: auto;
        }
    }

    .chinaGoodsScroll_bg {
        width: 100%;
        height: 4.82rem;
        background-image: url('../../assets/img/chinese_goods_background_x.png');
        background-size: 100%;
        background-repeat: no-repeat;
        background-attachment:fixed;
        position: absolute;
        left: 0;
        top: 0;
    }

    .card_box {
        padding: 0 .3rem;
        display: flex;
        flex-wrap: wrap;
    }

    .card_list {
        /*&:first-child{
         margin-top: 0;
        }*/
        border-radius: .1rem;
        overflow: hidden;
        width: 50%;
        &:nth-child(1n + 3) {
            margin-top: 0.16rem;
        }
        &:nth-child(odd) {
            padding-right: .05rem;
        }
        &:nth-child(even) {
            padding-left: .05rem;
        }
        .card-padding {
            padding-top: 0.22rem;
            h3 {
                font-size: 0.26rem;
                margin: 0 0.24rem;
                height: .74rem;
                color: #353535;
                font-weight: normal;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 1.5;
                white-space: normal;
                word-break: break-all;
                word-wrap: break-word
            }

            .list_text {
                margin: 0.3rem 0.26rem .2rem;
                .list_left {
                    float: left;
                    h2 {
                        font-size: 0.24rem;
                        color: #FF0000;
                        float: left;
                        font-weight: 500;
                        line-height: .5rem;
                    }

                }
                .list_right {
                    height: .44rem;
                    color: #999;
                    font-size: 0.24rem;
                    float: right;
                    line-height: .5rem;
                }
            }
        }
    }
    .swiper{
        height: 3.54rem;
        overflow: hidden;
        position: relative;
    }
    .swiper-container{
        height: 3rem;
        overflow: hidden;
        text-align: center;
    }
    .swiper-slide {
        height: 100%;
        overflow:hidden;
        -webkit-transition: 300ms;
        transition: 300ms;
        border-radius: .1rem;
        -webkit-transform: scale(0.6) translateX(10%);
        transform: scale(0.6) translateX(10%);
        position: relative;
    }
    .swiper-slide-prev,.swiper-slide-next {
        -webkit-transform: scale(0.8) translateX(13%);
        transform: scale(0.8) translateX(13%);
    }
    .swiper-slide-active {
        top: 0;
        opacity: 1;
        -webkit-transform: scale(1) translateX(10%);
        transform: scale(1) translateX(10%);
    }
    .swiper-item{
        width: 6.2rem;
        position:absolute;
        top:0;
        left:50%;
        transform: translateX(-50%);
        border-radius: .1rem;
    }
    .swiper-pagination{
        text-align: right;
        color: #fff;
        font-size: .3rem;
        padding-right: .16rem;
    }
</style>
<style>
    .chinaGoods .header .title {
        color: #fff;
    }
</style>
<template>
    <div class="collage_tab chinaGoods">
        <v-header isBack="0" :class="hideHeader ? 'hide' : ''"></v-header>
        <div class="main_allScroll">
            <v-scroll class="chinaGoodsScroll"
                      ref="chinaGoodsScroll"
                      :listenScroll="true"
                      :probeType="2"
                      :pullDownRefresh="pullDownRefreshObj"
                      :pullUpLoad="pullUpLoadObj"
                      :startY="parseInt(startY)"
                      @pullingDown="onPullingDown"
                      @pullingUp="onPullingUp"
                      @touchend.stop="clickItem"
                      @pageScrol="pageScrol"
            >
                <div class="chinaGoodsScroll_bg" :style="{height:parseFloat(interactive.statusBarHeight.height) + 3.46 + 'rem',backgroundPositionY:  parseFloat(interactive.statusBarHeight.height) + 3.46 - 5.3 + 'rem'}"></div>
                <!--:style="{top:-parseFloat(interactive.statusBarHeight.height) + 0.88 + 'rem'}"-->
                <!--<swiper style="width:100%;margin:0 auto;" :style="{paddingTop: interactive.statusBarHeight.height}" auto height="3.55rem"> &lt;!&ndash;:interval="10000"&ndash;&gt;
                                    <swiper-item v-for="item in demo03_list" class="black" @click.native="bannerClick(item)"><img width="100%" v-lazy='{src:item.bannerImg, loading: bannerLoadImg, error: bannerLoadImg}' alt=""></swiper-item>
                                </swiper>-->
                <div class="swiper" :style="{paddingTop: interactive.statusBarHeight.height,height:parseFloat(interactive.statusBarHeight.height) + 3.54 + 'rem' }">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide v-for="slide in cityBanner.arr" :key="slide.bannerId" @touchend.stop="bannerClick(slide)">
                            <img class="swiper-item" :src="slide.bannerImg" :alt="slide.bannerId">
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-pagination" slot="pagination"></div>
                </div>
                <div class="chinese_goods_tu" v-if="cityZoneBanner.arr &&cityZoneBanner.arr.length >= 1 " v-on:click="bannerClick(cityZoneBanner.arr[0])">
                    <img v-lazy='{src:cityZoneBanner.arr[0].bannerImg, loading: bannerLoadImg, error: bannerLoadImg}' alt="">
                </div>
                <h1 style="text-align: center;width: 100%;margin-bottom: .2rem;"><span class="recommended_for_you"></span></h1>
                <div class="card_box">
                    <div v-for="(list,index) in list" class="card_list"
                         @click.stop="gotoPage(list)">
                        <card>
                            <img slot="header" v-lazy="{src: list.productInfo.mainImage}"
                                 style="width:100%;display:block;margin:0 auto;height: 3.4rem">
                            <div slot="content" class="card-padding">
                                <h3><i :class="list.type == '3' || list.type == '1' ?'mall_proprietary_icon':list.type == '5'?'province_recommend_icon':''"></i>{{list.productInfo.name}}</h3>
                                <div class="list_text">
                                    <flexbox>
                                        <flexbox-item>
                                            <div class="list_left">
                                                <h2>￥{{list.minSellPrice || '0.00'}}</h2>
                                            </div>
                                            <div class="list_right">
                                                <span>销量{{list.sales > 10000 ? (list.sales/10000).toFixed(2) + '万' : list.sales || 0}}件</span>
                                            </div>
                                        </flexbox-item>
                                    </flexbox>
                                </div>
                            </div>
                        </card>
                    </div>
                </div>
            </v-scroll>
            <div class="shopCart" @click="$router.push('/shopCart')" :style="{bottom:parseFloat(interactive.statusBarHeight.tabBarHeight)+1.36 + 'rem'}">
                <Badge class="cartNumber" v-show="shopCart.obj.number && shopCart.obj.number>0"
                       :text="shopCart.obj.number"></Badge>
                <img src="../../assets/img/shopCart_red_icon.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
  import {mapState,mapActions} from 'vuex'
  import {Card, Flexbox, FlexboxItem, Badge} from 'vux'
  import {GET_CITYBANNER,GET_CITYZONEBANNER} from '../../store/home'
  var vm;
  export default {
    name: 'cityCall',
    components: {
      Card, Flexbox, FlexboxItem, Badge
    },
    data() {
      return {
        title: '中国好物',
        bgImg: require('../../assets/img/cityCallBg.png'),
        list: [],
        demo03_list: [],
        loadMore: false,
        pageNum: 1,
        scrollPos: 0,
        bannerLoadImg: require('../../assets/img/banner_loadImg.png'),

        scrollbar: false,
        scrollbarFade: false,
        pullDownRefresh: true,
        pullDownRefreshThreshold: 60,
        pullDownRefreshStop: 40,
        pullUpLoad: true,
        pullUpLoadThreshold: 0,
        pullUpLoadMoreTxt: 'scrollComponent.defaultLoadTxtMore',
        pullUpLoadNoMoreTxt: 'scrollComponent.defaultLoadTxtNoMore',
        startY: 0,
        hideHeader: true,

        swiperOption: {
          init:false,
          pagination: {
            el: '.swiper-pagination',
            type : 'fraction',
            renderFraction: function (currentClass, totalClass) {
              return '<span class="' + currentClass + '"></span>' +
                '/' +
                '<span class="' + totalClass + '"></span>';
            },
          },
          loop: true,
          loopAdditionalSlides:3,
          width: window.innerWidth / 750 * 620,
          autoplay:{
            disableOnInteraction: false,
          },
          centeredSlides: true,
          spaceBetween:- window.innerWidth / 750 *20,   //之间距离
          on: {
            click: function () {
              const realIndex = this.realIndex;
              vm.bannerClick(vm.cityBanner.arr[realIndex]);
            }
          }
        },
      }
    },
    created() {
      vm = this
      this.createInit()
    },
    activated: function () {
      this.init()
      this.Interactive.changeStatusStyle('1')
    },
    deactivated(){
      this.Interactive.changeStatusStyle('0')
    },
    mounted() {
    },
    methods: {
      ...mapActions([GET_CITYBANNER,GET_CITYZONEBANNER]),
      createInit() {
        this.list = []
        this.loadMore = false
        this.pageNum = 1
        this.scrollPos = 0
        this.hideHeader = true
        this.getBanner()
        this.getZoneBanner()
        this.searchPagedHundredCityTemplateList()
        // this.searchPagedPromotionTemplates()
      },
      init() {
        if(this.scrollPos < 0){
          this.scrollPos = 0
        }
        this.$refs.chinaGoodsScroll.scrollTo(0, -this.scrollPos)
      },
      backTop() {
        this.$refs.chinaGoodsScroll.scrollTo(0, 0, 700, 'bounce')
      },
      getBanner() {
        this.$ajax.getBanner({
          pageSize: 5,
          pageNum: 1,
          location: 14,
          queryType: 'App'
        })
          .then((res) => {
            this.GET_CITYBANNER(res.body.content.list)
            this.$nextTick(()=>{
              this.swiperOption.init = true
              this.swiper.init()
            })
          })
      },
      getZoneBanner() {
        this.$ajax.getBanner({
          pageSize: 1,
          pageNum: 1,
          location: 20,
          queryType: 'App'
        })
          .then((res) => {
            this.GET_CITYZONEBANNER(res.body.content.list)
          })
      },
      bannerClick(obj){
        if(obj.type == 0){
          return
        }
        if(obj.type == 1){
          if(obj.businessType == "1" || obj.businessType == "3"){
            this.$router.push( "/home/product_details?type="+obj.businessType+"&templateId="+obj.businessId)
          }else if(obj.jumpUrl && obj.title) {
            let urlOley = obj.jumpUrl.trim()
            if(obj.jumpUrl.indexOf('?') >= 0 ){
              this.$router.push(urlOley.split('#')[1] + '&t=' + obj.title + '&bannerId=' + obj.bannerId)
            } else {
              this.$router.push(urlOley.split('#')[1] + '?t=' + obj.title + '&bannerId=' + obj.bannerId)
            }
          }
        }else if(obj.type == 2){
          if(obj.jumpUrl && obj.jumpUrl != null){
            let url = obj.jumpUrl.trim()
            if(url.indexOf('?') >= 0 ){
              url  = url  + '&bannerId=' + obj.bannerId
            } else {
              url = url + '?bannerId=' + obj.bannerId
            }
            this.Interactive.intoActivityWebView(obj.title,url)
          }
        }
      },
        //   走省级代理接口
      searchPagedPromotionTemplates() {
        this.$ajax.searchGoods({
          goodsType: 5,
          pageNum: this.pageNum,
          pageSize: 15,
          parentCategory: null,
          goodsName: '',
          category: null,
          orderBy: '',
          orderType: 'desc',
          queryType : 'common'
        })
          .then(res => {
            this.$nextTick(() => {
              this.$refs.chinaGoodsScroll.forceUpdate()
            })
            if (res.body.content.list == null || res.body.content.list.length <= 0) {
              this.loadMore = false
            } else {
              this.loadMore = true
              this.pageNum++
            }
            if (this.list && this.list.hasOwnProperty('length') && this.list.length > 0) {
              this.list = this.list.concat(res.body.content.list)
            } else {
              this.list = res.body.content.list
            }
          })
          .catch(() => {
            this.$nextTick(() => {
              this.$refs.chinaGoodsScroll.forceUpdate()
            })
          })
      },
        //   走活动接口
        searchPagedHundredCityTemplateList() {
            this.$ajax.activity.searchPagedHundredCityTemplateList({
                pageNum: this.pageNum,
                pageSize: 15,
                activityId: this.$route.query.activityId || '475252186549321728',
            })
                .then((res) => {
                    this.$nextTick(() => {
                        this.$refs.chinaGoodsScroll.forceUpdate()
                    })
                    let type = Object.prototype.toString.call(res.body.content.list) === '[object Array]';
                    if(!type){
                        return
                    }
                    if(this.pageNum == 1){
                        this.list = res.body.content.list
                    }else{
                        this.list = this.list.concat(res.body.content.list)
                    }
                    if (res.body.content.list.length < 15) {
                        this.loadMore = false
                    } else {
                        this.loadMore = true
                        this.pageNum++
                    }
                })
                .catch(() => {
                    this.$nextTick(() => {
                        this.$refs.chinaGoodsScroll.forceUpdate()
                    })
                })
        },
      gotoPage(data) {
        this.$router.push("/home/product_details?type=" + data.type+ "&templateId=" + data.templateId)
      },
      refresh() {
        global.myLoad = true
        this.createInit()
      },
      infinite() {
        global.myLoad = true
        this.loadMore = false
        // this.searchPagedPromotionTemplates()
        this.searchPagedHundredCityTemplateList()
      },
      rebuildScroll() {
        Vue.nextTick(() => {
          this.$refs.chinaGoodsScroll.destroy()
          this.$refs.chinaGoodsScroll.initScroll()
        })
      },
      onPullingDown() {
        console.log('模拟更新数据')
        this.refresh()

      },
      onPullingUp() {
        // 更新数据
        console.log('更新数据')
          if(this.loadMore){
              this.infinite()
          }else{
              this.$nextTick(() => {
                  this.$refs.chinaGoodsScroll.forceUpdate()
              })
          }
      },
      pageScrol(data) {
        if(data.y >= -60){
          this.hideHeader = true
        }else{
          this.hideHeader = false
        }
        this.scrollPos = -data.y
      },
    },
    watch: {
      scrollbarObj: {
        handler() {
          this.rebuildScroll()
        },
        deep: true
      },
      pullDownRefreshObj: {
        handler(val) {
          const scroll = this.$refs.chinaGoodsScroll.scroll
          if (val) {
            scroll.openPullDown()
          } else {
            scroll.closePullDown()
          }
        },
        deep: true
      },
      pullUpLoadObj: {
        handler(val) {
          const scroll = this.$refs.chinaGoodsScroll.scroll
          if (val) {
            scroll.openPullUp()
          } else {
            scroll.closePullUp()
          }
        },
        deep: true
      },
      startY() {
        this.rebuildScroll()
      },
    },
    computed: {
      ...mapState({
        interactive: state => state.interactive,
        cityBanner: state => state.homeList.cityBanner,
        cityZoneBanner: state => state.homeList.cityZoneBanner,
          shopCart: state => state.shopCart,
      }),
      scrollbarObj: function () {
        return this.scrollbar ? {fade: this.scrollbarFade} : false
      },
      pullDownRefreshObj: function () {
        return this.pullDownRefresh ? {
          threshold: parseInt(this.pullDownRefreshThreshold),
          stop: parseInt(this.pullDownRefreshStop)
        } : false
      },
      pullUpLoadObj: function () {
        return this.pullUpLoad ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}
        } : false
      },
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    }
  }
</script>
